<%
int fetchLimit = application['appconfig.lastTranscationShowingLimit'] as int
%>
<br/>
<b>Date : </b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="transcationCreatedDateStg" name="transcationCreatedDateStg" value="${request.createdDateStg}" size="12" class="validate[required]"/>
&nbsp;[YYYY-MM-DD]
&nbsp;&nbsp;&nbsp;&nbsp;
<b>Time : </b>
<input type="text" id="transcationCreatedTimeStg" name="transcationCreatedTimeStg" value="${request.createdTimeStg}" size="2"/>
&nbsp;[HH:mm]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>e.g. : </b>10 coffee at Kadamba #tea #snacks
<br/>
<div id="expensesForm">
	<b>Expenses : </b>
	&nbsp;
	<input type="text" id="transcation" name="transcation" value="" size="122" />
	&nbsp;&nbsp;
	<input type="button" value="&#10010; Add" class="plusthick" onClick="addTranscation()" />
</div>
<div align="center">
	<a class="center-link-2" href="#" id="showOrHideAdvancedExpensesForm">Advanced</a>
	<!--  
		<span class="h3" style="text-align: center;">Advanced</span>
	-->
</div>
<div id="advancedExpensesForm" style="display:none;">
	<b>Amount : </b> 
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="text" id="transcationAmount" name="transcationAmount" value="" size="5" />
	&nbsp;&nbsp;
	<b>Description : </b> 
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="text" id="transcationDescription" name="transcationDescription" value="" size="45" />
	&nbsp;&nbsp;
	<b>Tags : </b> 
	&nbsp;&nbsp;
	<input type="text" id="transcationTags" name="transcationTags" value="" size="27" />
	&nbsp;&nbsp;
	<input type="button" value="&#10010; Add" onClick="addTranscationValues()"/> 
</div>

<br />

<div style="text-align: center;"> 
	<strong id="infoMessage" style="text-align: center;"></strong> 
</div> 

<table id="transcationHistory" class="table-2" width="100%" border="0" cellpadding="5" cellspacing="0" align="center">
<thead>	
	<tr class="table-2-header">
		<th class="table-2-cell" align="center" width="40px">S. No.</th>
		<th class="table-2-cell" align="right" width="40px">Id</th>
		<th class="table-2-cell" align="right" width="60px">Amount</th>
		<th class="table-2-cell" align="left">Description</th>
		<th class="table-2-cell" align="left">Tags</th>
		<th class="table-2-cell" align="left">Updated Date & Time</th>
	</tr>
</thead>
<tbody>
<%
use(groovy.time.TimeCategory) {
	int timeZoneHour = session.userTimeZoneHour as int
	int timeZoneMinute = session.userTimeZoneMinute as int

	def transcations = request.transcations
	def transcationTags = request.transcationTags
	int count = 0;
	transcations.each { transcation ->
		count++;
		String s = count % 2 == 0 ? 'table-2-even-row' : 'table-2-odd-row'
		def transcationTag = transcationTags[transcation.key.id]
		def amount = String.format("%.2f", transcation.amount)
		def time = transcation.createdTime + timeZoneHour.hours + timeZoneMinute.minutes
		def createdTime = time.format('dd-MM-yyyy HH:mm:ss')
%>						
	<tr class='${s}'>
		<td class='table-2-cell' align="right">$count</td>
		<td class='table-2-cell' align="right"><a class='table-2-link' href="transcationEdit.groovy?transcationKey=${transcation.key.id}">$transcation.key.id</a></td>
		<td class='table-2-cell' align="right">$amount</td>
		<td class='table-2-cell' align="left">$transcation.description</td>
		<td class='table-2-cell' align="left">$transcationTag</td>
		<td class="table-2-cell" align="left">$createdTime </td>
	</tr>
<% 
	}
}	
%>
</tbody>
</table>	
<br />

<div id='alltranscationTags'></div>

<script>

\$(document).ready(function() {
	\$('#transcation').focus();
	
 	\$("#transcationCreatedDateStg").datepicker({
 		dateFormat : "dd-mm-yy", 
 		maxDate : 0, 
 		constrainInput : false
 	});

 	\$('#transcationCreatedTimeStg').timepicker({});
 	
    \$('#transcation').bind('keydown', function(e) {
    	var code = (e.keyCode ? e.keyCode : e.which);
    	 if(code == 13) {	addTranscation();	}
    });
    \$('#transcationTags').bind('keydown', function(e) {
    	var code = (e.keyCode ? e.keyCode : e.which);
    	 if(code == 13) {	addTranscationValues();	}
    });
    
    \$('#showOrHideAdvancedExpensesForm').click(function(){
    	var div = document.getElementById('advancedExpensesForm')
    	if(div.style.display == 'none') {
    		div.style.display = 'inline'
    		\$('#transcationAmount').focus();
    	} else {
    		div.style.display = 'none'
    		\$('#transcation').focus();
    	}
    });
});

function showOrHideAdvancedExpensesForm() {
	var div = document.getElementById('advancedExpensesForm')
	if(div.style.display == 'none') {
		div.style.display = 'inline'
	} else {
		div.style.display = 'none'
	}
};

function addTranscation() {
	var transcationCreatedDateStg = \$('#transcationCreatedDateStg').val();
	var transcationCreatedTimeStg = \$('#transcationCreatedTimeStg').val();
	var transcation = \$('#transcation').val();
	\$.post('transcationCreate.groovy',
			{	
				transcation               : transcation, 
				transcationCreatedDateStg : transcationCreatedDateStg,
				transcationCreatedTimeStg : transcationCreatedTimeStg,
				json                      : 'true' 
			},
			function(data) {
				showNotification({
                    message: data,
                    type: "success",
                    autoClose: true,
                    duration: 5
                });
				reloadTranscationHistory();
				//reloadTranscationTags();
				\$('#transcation').val('');
				\$('#transcation').focus();
		 	}
		);
};

function addTranscationValues() {
	var transcationCreatedDateStg = \$('#transcationCreatedDateStg').val();
	var transcationCreatedTimeStg = \$('#transcationCreatedTimeStg').val();
	var transcationAmount  = \$('#transcationAmount').val();
	var transcationDescription = \$('#transcationDescription').val();
	var transcationTags = \$('#transcationTags').val();
	\$.post('transcationCreate.groovy',
		{	
			transcationAmount         : transcationAmount,
			transcationDescription    : transcationDescription,
			transcationTags           : transcationTags,
			transcationCreatedDateStg : transcationCreatedDateStg,
			transcationCreatedTimeStg : transcationCreatedTimeStg,
			action                    : 'Create',
			json                      : 'true'
		},
		function(data){
			showNotification({
                message: data,
                type: "success",
                autoClose: true,
                duration: 5
            });
			reloadTranscationHistory();
			//reloadTranscationTags();
			\$('#transcationAmount').val('');
			\$('#transcationDescription').val('');
			\$('#transcationTags').val('');
			\$('#transcationAmount').focus();
	 	}
	);
};

function reloadTranscationHistory() {
	\$.ajax(
       	{
        	url     : 'transcationFetch.groovy',
        	data    : 'fetchLimit=$fetchLimit',
            success : function(data) {	
        		       	\$('#transcationHistory tbody').replaceWith(data);
            		  },
            error   : function() { 
		            	//alert(arguments[2]); 
						showNotification({
		                    message: arguments[2],
		                    type: "error",
		                    autoClose: true,
		                    duration: 5
		                });
           			} 
		});
};

function reloadTranscationTags() {
	\$.ajax(
       	{
        	url     : 'transcationTagFetch.groovy',
            success : function(data) {	
        		       	\$('#alltranscationTags').replaceWith(data);
            		  },
            error   : function() { 
  		            	//alert(arguments[2]); 
  						showNotification({
  		                    message: arguments[2],
  		                    type: "error",
  		                    autoClose: true,
  		                    duration: 5
  		                });
            		} 
		});
};

</script>